import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  // import.meta.env.BASE_URL 它的值为 / 可以不写在方法中ss
  // history: createWebHistory(import.meta.env.BASE_URL),
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      // 路由代码分割和懒加载
      // import() 1、在模块化时拆分模块代码为一个单独的js文件，2、它可以写在块语句中[动态引入]
      // 返回值  Promise
      component: () => import('../views/HomeView.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      beforeEnter: (to, from) => {
        console.log('路由独享 -- beforeEnter')
      }
    },
    {
      // 动态路由参数
      path: '/detail/:id',
      name: 'detail',
      component: () => import('../views/DetailVue.vue'),
      beforeEnter: (to, from) => {
        console.log('路由独享 -- beforeEnter')
      }
    },
    {
      path: '/login',
      component: () => import('../views/LoginView.vue'),
      // 路由独享守卫
      // 此守卫只对于当前这个路由规则生效，其它的路由规则下面不生效
      // vue-rotuer@3 3个参数 next  4中只需要2个参数
      beforeEnter: (to, from) => {
        console.log('路由独享 -- beforeEnter')
      }
    }
  ]
})

// 导航守卫
// vue-router@3
//  + beforeEach((to,from,next)=>next())
//  + beforeResolve((to,from,next)=>next()) ,它最后一定要执行next函数
//  + 动态路由 addRoutes/addRoute
//  + RouteLink组件它有一个tag属性，可以自定义编译后的html标签
// vue-router@4
//  + beforeEach((to,from)=>false表示停止/字符串跳转到对应的地址/{path,repalce})
//  + beforeResolve((to,from)=>false表示停止/字符串跳转到对应的地址/{path,repalce})
//  + 动态路由 addRoute
//  + RouteLink组件没有tag属性，它是通过插槽来完成的自定义标签
// 全局守卫 -- 每次页面切换它都会触发执行
// to 和 from 它们都是路由对象
// to 目标路由对象  a => b  b路由对象
// from 源路由对象    a => b  a路由对象
// 全局前置导航守卫 -- 路由一进入就触发，第1个触发的
router.beforeEach((to, from) => {
  // 排除掉登录
  if (!['/login', '/'].includes(to.path)) {
    if (!window.sessionStorage.getItem('token')) {
      // 如果没有登录，则跳转到登录页面  以前的版本中 next('/login')
      // 能回退
      // return '/login'
      // 返回为false，表示阻止向下继续渲染，白屏
      // return false
      // 返回对象 --> 跳转不回退
      return { path: '/login', replace: true }
    }
  }

  console.log('全局 -- beforeEach')
})

// 全局解析守卫
// 等待 路由独享和组件守卫执行完毕后，才执行
router.beforeResolve((to, from) => {
  console.log('全局 -- beforeResolve')
})

// 全局后置守卫
// 它的回调函数中只有两个参数
router.afterEach((to, from) => {
  console.log('全局 -- afterEach')
})

export default router
